<template>
  <div class="todo-container">
    <h1>Todo List</h1>

    <TodoInput @add-todo="addTodo" />

    <TodoListDisplay
      :todos="todos"
      :filter="filter"
      @toggle-completed="toggleCompleted"
      @remove-todo="removeTodo"
    />

    <p>Completed tasks: {{ completedCount }}</p>

    <TodoFilters @update-filter="filter = $event" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoListDisplay from './TodoListDisplay.vue';
import TodoFilters from './TodoFilters.vue';

interface Todo {
  text: string;
  completed: boolean;
}

export default defineComponent({
  name: 'TodoList',
  components: { TodoInput, TodoListDisplay, TodoFilters },
  setup() {
    const todos = ref<Todo[]>([]);
    const filter = ref<'all' | 'active' | 'completed'>('all');

    const completedCount = computed(() => {
      return todos.value.filter(todo => todo.completed).length;
    });

    const addTodo = (text: string) => {
      todos.value.push({ text, completed: false });
    };

    const toggleCompleted = (index: number) => {
      todos.value[index].completed = !todos.value[index].completed;
    };

    const removeTodo = (index: number) => {
      todos.value.splice(index, 1);
    };

    return {
      todos,
      filter,
      completedCount,
      addTodo,
      toggleCompleted,
      removeTodo
    };
  }
});
</script>

<style scoped>
.todo-container {
  width: 350px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

p {
  margin-top: 10px;
  color: #333;
}
</style>